<style lang="scss" scoped>
    .tab{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: 0 5vw;
        height: 55px;
        box-sizing: border-box;
        display: flex;
        border-top: 1px solid #f5f5f5;
        .tabItem{
            width: 25%;
            text-align: center;
            img{
                height: 30px;
            }
            .itemName,
            .itemNameActive{
                height: 24px;
                line-height: 24px;
                font-size: 14px;
            }
            .itemNameActive{
                color: #fc9153;
            }
        }
    }
    .tabView{
        width: 100%;
        height: calc(100vh - 55px);
        overflow-y: auto;
    }
</style>
<template>
    <div class="tabTemp">
        <div class="tabView">
            <router-view />
        </div>
        <div class="tab">
            <div class="tabItem" 
                v-for="(item,index) in tabList" 
                :key="index"
                @click="tabChange(item)"
               >
                <div class="itemImg">
                    <img :src="$route.path === item.path ? item.imgURLActive : item.imgURL" alt="">
                </div>
                <div :class="$route.path === item.path ? 'itemNameActive' : 'itemName'">
                    {{ item.title }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                // 是否禁用点击tab导航
                flag: false,
                tabList: [
                    {
                        title: '首页',
                        // 跳转的地址
                        path: '/home',
                        // 如果图片是静态地址 使用require引入在data数据中 
                        // 不然 图片会按照 web服务器的地址下开始查找图片
                        imgURL: require('../static/tab/home.png'),
                        imgURLActive: require('../static/tab/home-active.png'),
                    },
                    {
                        title: '社区',
                        // 跳转的地址
                        path: '/community',
                        // 如果图片是静态地址 使用require引入在data数据中 
                        // 不然 图片会按照 web服务器的地址下开始查找图片
                        imgURL: require('../static/tab/community.png'),
                        imgURLActive: require('../static/tab/community-active.png'),
                    },
                    {
                        title: '购物车',
                        // 跳转的地址
                        path: '/cart',
                        // 如果图片是静态地址 使用require引入在data数据中 
                        // 不然 图片会按照 web服务器的地址下开始查找图片
                        imgURL: require('../static/tab/cart.png'),
                        imgURLActive: require('../static/tab/cart-active.png'),
                    },
                    {
                        title: '我的',
                        // 跳转的地址
                        path: '/myself',
                        // 如果图片是静态地址 使用require引入在data数据中 
                        // 不然 图片会按照 web服务器的地址下开始查找图片
                        imgURL: require('../static/tab/myself.png'),
                        imgURLActive: require('../static/tab/myself-active.png'),
                    }
                ]
            }
        },
        methods: {
            tabChange(item){
                // tabIndex = index,$router.push(item.path)
                // 判断当前的路由地址是否和要跳转的路由地址一致
                if(this.$route.path === item.path){
                    return
                }
                // 如果禁用点击tab
                if(this.flag){
                    return
                }
                // 通过上面的检查 立刻启动tab导航的禁用
                this.flag = true;
                // 直接跳转
                this.$router.push(item.path);

                // 跳转后的0.15s 恢复tab导航使用
                setTimeout(() => {
                    this.flag = false;
                },150)
            }
        },
    }
</script>